<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03-内联形式的ref问题</title>
  </head>
  <body>
    <div id="app"></div>

    <!-- 导入 react 主库 -->
    <script src="../js/react.development.js"></script>
    <!-- 导入 reactDom 扩展库 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 导入 babel 用于将jsx转为js -->
    <script src="../js/babel.min.js"></script>
    <!-- 导入 prop-types 用于对组件标签属性进行限制 -->
    <script src="../js//prop-types.js"></script>

    <script type="text/babel">
      // 定义类组件
      class Demo extends React.Component {

        state = {
            isHot: false
        }
        // 改变天气
        changeWeaht = () => {
            const { isHot } = this.state
            this.setState({
                isHot: !isHot
            })
        }

        // 点击提示右侧输入框内容
        showData = () => {
          const { input1 } = this;
          alert(input1.value);
        };

        obtainRef =(ele) => {
            this.input1 = ele
            this.button = ele
            console.log(ele)
        }

        render() {
            const { isHot } = this.state
          return (
            <div>
              {/* 内联形式的ref在每次组件更新也就是render函数调用的时候 ref会先输出一次 null 然后输出dom节点
              可以绑定函数来改变，  但这是无关紧要的随便写就可以 */}
              <h1>今天天气很{isHot ? '炎热' : '凉爽'}</h1>
              <input ref={this.obtainRef} type="text" />
              <button ref={this.obtainRef} onClick={this.showData}>点击提示右侧内容</button>
              <button onClick={this.changeWeaht}>改变天气</button>
            </div>
          );
        }
      }
      ReactDOM.render(<Demo />, document.getElementById("app"));
    </script>
  </body>
</html>
